<template>
  <div class="nav-menu">
    <ul class="menu">
      <li class="menu-item" v-for="(item, index) in menus" :class="{ active: item.active }" :key="index" @click="onClickItem(item)">
        <span>{{ item.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
const emit = defineEmits(["change"]);
const props = defineProps({
  menus: {
    type: Array<any>,
    default: () => [],
  },
});

function onClickItem(item) {
  props.menus.forEach((e) => {
    e.active = false;
  });
  item.active = true;
  emit("change", item);
}
</script>
<style lang="scss" scoped>
.nav-menu {
  position: fixed;
  width: 100vw;
  bottom: 0;
  background: url("./images/bottom_bg.svg") center no-repeat;
  background-size: cover;
}
.menu {
  display: flex;
  justify-content: center;
  gap: 20px;
  letter-spacing: 0.225em;
  height: 100%;
  list-style: none;

  .menu-item {
    position: relative;
    cursor: pointer;
    font-family: YouSheBiaoTiHei;
    color: #83cbff;
    font-size: 21.41px;
    font-weight: 400;
  }
  .menu-item:hover ~ li::before {
    left: 0;
  }
  .menu-item:hover,
  .active {
    text-shadow: 0px 1.78px 5.35px #00c2ffcf;
    color: #fff;
  }
}
</style>
